<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>


    <meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Custom Click Validator</title>

<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin:0;
	padding:0;
}
</style>

<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>


<!--begin custom header content for this example-->

<style type="text/css">

.dd-demo {
    position:relative;
    border:4px solid #666;
    text-align:center;
    color:#fff;
    cursor:move;
    height:100px;
    width:100px;
}

#dd-demo-1 { 
    background:url(../dragdrop/assets/circle.gif) 0 0 no-repeat;
    border:0px solid black;
    z-index:10;
    cursor:default;
}

#dd-demo-2 { 
    background:#A0B9A6;
    top:10px; left:180px;
    border:0px solid black;
    cursor:default;
}

</style>


<!--end custom header content for this example-->

</head>

<body class="yui-skin-sam">


<h1>Custom Click Validator</h1>

<div class="exampleIntro">
	<p>This example demonstrates how to implement a custom click validator to
make a circular drag and drop implementation.  Because all DOM elements that
have dimensions are rectangular, the way to implement a circular drag object
is to perform calculations on mousedown to determine whether the mouse was 
targeting a valid portion of the element (eg, a portion within the circle).</p>

<p>The same method could be used to create any non-rectangular draggable object.</p>			
</div>

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

<div id="dd-demo-1" class="dd-demo"><br />DD</div>
<div id="dd-demo-2" class="dd-demo">DDTarget</div>

<script type="text/javascript">
    (function() {
        var dd, dd2, clickRadius = 46, startPos,
            Event=YAHOO.util.Event, Dom=YAHOO.util.Dom;

        YAHOO.util.Event.onDOMReady(function() {

            var el = Dom.get("dd-demo-1");
            startPos = Dom.getXY(el);

            dd = new YAHOO.util.DD(el);

            // our custom click validator let's us prevent clicks outside
            // of the circle (but within the element) from initiating a
            // drag.
            dd.clickValidator = function(e) {

                // get the screen rectangle for the element
                var el = this.getEl();
                var region = Dom.getRegion(el);

                // get the radius of the largest circle that can fit inside
                // var w = region.right - region.left;
                // var h = region.bottom - region.top;
                // var r = Math.round(Math.min(h, w) / 2);
                //-or- just use a well-known radius
                var r = clickRadius;

                // get the location of the click
                var x1 = Event.getPageX(e), y1 = Event.getPageY(e);

                // get the center of the circle
                var x2 = Math.round((region.right+region.left)/2);
                var y2 = Math.round((region.top+region.bottom)/2);


                // I don't want text selection even if the click does not
                // initiate a drag
                Event.preventDefault(e);

                // check to see if the click is in the circle
                return ( ((x1-x2)*(x1-x2) + (y1-y2)*(y1-y2)) <= r*r );
            };

            dd.onDragDrop = function(e, id) {
                // center it in the square
                Dom.setXY(this.getEl(), Dom.getXY(id));
            }

            dd.onInvalidDrop = function(e) {
                // return to the start position
                // Dom.setXY(this.getEl(), startPos);

                // Animating the move is more intesting
                new YAHOO.util.Motion( 
                    this.id, { 
                        points: { 
                            to: startPos
                        }
                    }, 
                    0.3, 
                    YAHOO.util.Easing.easeOut 
                ).animate();

            }

            dd2 = new YAHOO.util.DDTarget("dd-demo-2");

        });
    })();
</script>

<!--END SOURCE CODE FOR EXAMPLE =============================== -->

</body>
</html>
